<template>
	<view>
		<view class="" style="position: fixed;top: calc(20vmin / 7.5);left: calc(20vmin / 7.5);">
			<u-icon name="close-circle" size="32rpx" color="#333" @click="esc"></u-icon>
		</view>

		<view class="bg">

		</view>
		<view class="card">
			<view class="tag">
				我的战绩
			</view>
			<view class="">
				<view class="" style="margin-right: calc(20vmin / 7.5);">
					<view class="title_">
						挑战得分
					</view>
					<scroll-view scroll-y="true"
						style="height: calc(220vmin / 7.5);width: calc(740vmin / 7.5);padding:0 calc(20vmin / 7.5);">
						<view class="num" v-for="(items ,index) in activ_list">
							<image src="../../../static/challenge.png" mode="aspectFill"></image>
							<view class="title">
								{{items.title}}
							</view>
							<view class="number">
								<text>成绩：</text>
								<text>{{items.number}}</text>
							</view>
						</view>
					</scroll-view>

				</view>
				<view class="">
					<view class="title_">
						我的勋章
					</view>
					<view class="" style="display: flex;">
						<view class="image" v-for="(item ,index) in  bages_list">
							<image :src="item.pic" mode="aspectFill"></image>
						<!-- 	<view class="text">
								{{item.title}}
							</view> -->
						</view>
					</view>


				</view>
			</view>
			<view class="" style="display: flex;flex-direction: column;align-items: center;">
				<view class="title_">
					我的奖杯
				</view>
				<view style="color:#FF5A5A;">恭喜您所在的队伍获得 {{rank==1?'冠军队':rank==2?'卓越队':rank==3?'精英队':'优秀队'}} 称号</view>
				<image style="width: calc(200vmin / 7.5);"
					src="https://wjlm.goldsu.cn/file/ee3f0e40-45e2-4d37-be8d-27d39c378d60.png"
					mode="widthFix"></image>

				<view class="btn" @click="enlargementCode">
					生成海报
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	export default {

		data() {
			return {
				activ_list: [],
				bages_list: [],
				rank: 1,
				path: ''
			}
		},
		mounted() {
			let game_id = uni.getStorageSync("gameId")
			this.$myRuquest('home/game/game_record', {
				game_id
			}).then(res => {
		
				let activ_list = res.data.activ_list
				activ_list.forEach(item=>{
					if(item.clues_num==activ_list[0].clues_num) item.champion=true
					if(item.type==1||item.type==3) {
						item.number=this.$util.timeFormat(item.number)
					}else{
						item.number+='分'
					}
				})
					this.activ_list = activ_list
				this.bages_list = res.data.bages_list
				this.rank = res.data.rank
			})
		},
		methods: {
			enlargementCode() {
uni.navigateTo({
	url:'./createPoster'
})
			},
			esc() {
				uni.setStorageSync('gameOver', 'yes');
				if(this.$ws) this.$ws.completeClose()
				uni.removeStorageSync('gameId');
				this.$audioStop()
				uni.switchTab({
					url: '/pages/me/me'
				})
			}
		}
	}
</script>

<style lang="scss">
	.tag {
		background-color: rgb(249, 204, 104);
		font-size: calc(32vmin / 7.5);
		font-weight: 700;
		width: calc(260vmin / 7.5);
		height: calc(70vmin / 7.5);
		line-height: calc(70vmin / 7.5);
		border-radius: calc(35vmin / 7.5);
		text-align: center;
		position: absolute;
		color: #fff;
		top: calc(-35vmin / 7.5);
		left: 50%;
		transform: translateX(-50%);
	}

	.title_ {
		font-size: calc(32vmin / 7.5);
		font-weight: 700;
		margin: calc(20vmin / 7.5) 0;
	}

	.card {
		background-color: #fff;
		width: 80vw;
		height: calc(560vmin / 7.5);
		box-shadow: 0 0 calc(12vmin / 7.5) #999999;
		border-radius: calc(12vmin / 7.5);
		position: fixed;
		top: 50%;
		left: 50%;
		padding: calc(20vmin / 7.5);
		display: flex;
		transform: translate(-50%, -50%);

		>.title {
			text-align: center;
			padding: calc(20vmin / 7.5);
			color: #FF5A5A;
			font-size: calc(38vmin / 7.5);
			font-weight: 700;
		}
	}

	.num {
		display: flex;
		margin: calc(10vmin / 7.5) 0;
		color: #333333;

		image {
			width: calc(50vmin / 7.5);
			height: calc(50vmin / 7.5);
			margin-right: calc(12vmin / 7.5);
		}

		.title {
			flex: 1;
			white-space: nowrap;

			text-overflow: ellipsis;

			overflow: hidden;
		}

		.number {
			margin-left: calc(20vmin / 7.5);
			width: calc(190vmin / 7.5);
			display: flex;
			justify-content: space-between;
		}
	}

	.bg {
		margin: 0;
		padding: 0;
		min-height: 100vh;
		width: 100vw;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;

		background-color: rgba(249, 204, 104, .8);
		overflow: hidden;
	}

	.bg::before,
	.bg::after {
		content: '';
		position: absolute;
		bottom: 15vh;
		min-width: 300vw;
		min-height: 300vw;
		background-color: #fff;
		animation: rote 10s linear infinite;
	}

	.bg::before {
		left: -95%;
		border-radius: 45%;
		opacity: .5;
	}

	.bg::after {
		left: -95%;
		border-radius: 46%;
	}

	@keyframes rote {
		from {
			transform: rotateZ(0);
		}

		to {
			transform: rotateZ(360deg);
		}
	}

	.image {
		width: calc(160vmin / 7.5);
		height: calc(160vmin / 7.5);
		position: relative;
		margin: 0;

		image {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}

		.text {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			font-size: calc(12vmin / 7.5);
			color: #D4B683;
		}
	}

	.btn {
		width: calc(200vmin / 7.5);
		height: calc(66vmin / 7.5);
		background-color: #000000;
		font-size: calc(32vmin / 7.5);
		color: #FFFFFF;
		line-height: calc(66vmin / 7.5);
		text-align: center;
		border-radius: calc(66vmin / 7.5);
		position: absolute;
		bottom: calc(20vmin / 7.5);
		right: calc(20vmin / 7.5);

	}
</style>
